<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <link rel="stylesheet" type="text/css" href="css/menu.css">
    <link rel="icon" type="image/png" href="images/icons/logo.png" />
    <link rel="shortcut icon" type="image/png" href="images/icons/logo.png" />
  
    <script type="text/javascript" src="scripts/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="scripts/jquery-ui-1.9.2.custom.js"></script>
    <script type="text/javascript" src="scripts/jquery.mousewheel.min.3.0.6.js"></script>
    <style type="text/css">
      #anchors {
        margin-left: 500px;
        width: 200px
      }
    </style>
    <title>Thai Kitchen - Menu</title>
  </head>
  <body>
    <%@include file="/WEB-INF/header.inc"%>
    <!-- <div id="ie6pagewrap"> -->
    <div id="ie6pagecontainer">
      <div id="container">
        <div id="content">
          <c:forEach var='entry' items='${menuItemsByCategory}'>
            <h2 class="menu_category"><a name="${entry.key}">${entry.key}</a></h2>
            <c:forEach var='menu_item' items='${entry.value}'>
              <c:set var="name" value="${fn:toUpperCase(menu_item.name)}" />
              <c:choose>
                <c:when test="${not empty menu_item.modifier}">
                  <c:set var="modifier" value="(${menu_item.modifier})" />
                </c:when>
                <c:otherwise>
                  <c:set var="modifier" value="" />
                </c:otherwise>
              </c:choose>
              <div class="menu_item">
                <div>
                  <span class="entry">${menu_item.number}. ${name} ${modifier}</span>
                  <span class="tags">
                    <c:forEach var='tag' items='${menu_item.tags}'>
                      <img src="${tagIcons[tag.name]}" />
                    </c:forEach>
                  </span>
                  <fmt:setLocale value="en_US" />
                  <span class="price"><fmt:formatNumber type="currency" value="${menu_item.price}" /></span>
                </div>
                <div>
                  <span class="description">${menu_item.description}</span>
                </div>
              </div>
            </c:forEach>
          </c:forEach>
        </div>
        <div id="sidebar">
          <h4>Sections</h4>
          <ul id="sections">
            <c:forEach var='entry' items='${menuItemsByCategory}'>
              <li><a href="#${entry.key}">${entry.key}</a></li>
              <%-- TODO: connect list with page --%>
            </c:forEach>
          </ul>
        </div>
      </div>
    </div>
    <%@include file="footer.inc"%>
  </body>
</html>